import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Button, Carousel, Spin, Typography, Divider } from 'antd';
import { ShoppingCartOutlined, EyeOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { bookApi } from '../../api';

const { Meta } = Card;
const { Title } = Typography;

const Home = () => {
  const [loading, setLoading] = useState(true);
  const [books, setBooks] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    const fetchBooks = async () => {
      setLoading(true);
      try {
        const response = await bookApi.getAllBooks(0, 8);
        if (response.success) {
          setBooks(response.data.content || []);
        } else {
          console.error('获取书籍失败:', response.message);
        }
      } catch (error) {
        console.error('获取书籍错误:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchBooks();
  }, []);

  // 查看书籍详情
  const viewBookDetail = (id) => {
    navigate(`/books/${id}`);
  };

  // 轮播图内容
  const carouselContent = [
    {
      title: '夏季大促',
      description: '精选好书5折起',
      color: '#364d79',
      textColor: 'white'
    },
    {
      title: '新书上架',
      description: '最新畅销书籍',
      color: '#1890ff',
      textColor: 'white'
    },
    {
      title: '会员特惠',
      description: '注册会员享受更多优惠',
      color: '#52c41a',
      textColor: 'white'
    }
  ];

  return (
    <div>
      <Carousel autoplay>
        {carouselContent.map((item, index) => (
          <div key={index}>
            <div style={{ 
              height: '300px', 
              background: item.color,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              color: item.textColor
            }}>
              <h1 style={{ fontSize: '36px' }}>{item.title}</h1>
              <p style={{ fontSize: '18px' }}>{item.description}</p>
              <Button type="primary" size="large" onClick={() => navigate('/books')}>
                立即查看
              </Button>
            </div>
          </div>
        ))}
      </Carousel>

      <div style={{ padding: '20px 0' }}>
        <Title level={2}>推荐书籍</Title>
        <Divider />
        
        <Spin spinning={loading}>
          <Row gutter={[16, 16]}>
            {books.map(book => (
              <Col xs={24} sm={12} md={8} lg={6} key={book.id}>
                <Card
                  hoverable
                  cover={
                    <div style={{ 
                      height: '200px', 
                      display: 'flex', 
                      alignItems: 'center',
                      justifyContent: 'center',
                      background: '#f0f0f0'
                    }}>
                      <img 
                        alt={book.name} 
                        src={book.coverUrl || 'https://via.placeholder.com/150x200?text=No+Image'} 
                        style={{ maxHeight: '100%', maxWidth: '100%' }}
                      />
                    </div>
                  }
                  actions={[
                    <Button 
                      type="text" 
                      icon={<EyeOutlined />} 
                      onClick={() => viewBookDetail(book.id)}
                    >
                      查看详情
                    </Button>,
                    <Button 
                      type="text" 
                      icon={<ShoppingCartOutlined />} 
                      onClick={() => navigate(`/books/${book.id}`)}
                    >
                      加入购物车
                    </Button>
                  ]}
                >
                  <Meta
                    title={book.name}
                    description={
                      <div>
                        <div>作者: {book.author}</div>
                        <div style={{ color: 'red', fontWeight: 'bold' }}>
                          ¥{book.price?.toFixed(2)}
                        </div>
                      </div>
                    }
                  />
                </Card>
              </Col>
            ))}
          </Row>
        </Spin>
        
        {!loading && books.length > 0 && (
          <div style={{ textAlign: 'center', margin: '20px 0' }}>
            <Button 
              type="primary" 
              size="large"
              onClick={() => navigate('/books')}
            >
              查看更多
            </Button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Home; 